<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二、外部样式表 按照页面简易结构添加对应css-->
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		
	<!--一、 html结构   简易三层结构
	 语义化标记：header、main、footer
	【有利于SEO优化】
	 替代div+别名
	 -->
	 <header>
		<!-- 两列布局 起别名	id用于定位 class微调-->
		<!-- 中控区 页面两侧留白，控制整个页面宽度 -->
		<!-- 命名通常是id+方向 -->
		<div id="wrapper">
		<div class="head_left">
		<ul>
		<li><a href="#">小米网</a></li>
		<li><a href="#">MIUI</a></li>
		<li><a href="#">米聊</a></li>
		<li><a href="#">游戏</a></li>
		<li><a href="#">多看阅读</a><li>
		<li><a href="#">云服务</a></li>
		<li><a href="#">小米网移动版</a></li>
		<li><a href="#">问题反馈</a></li>
		<li><a href="#" class="c">Select Region</a></li>
		</ul>
		</div>
		<div class="head_right">
		<ul>	
		<li class="li_right"><i class="shop"></i><a href="#" class="d">购物车(0)</a></li>
		<li><a href="#" class="c">注册</a></li>
		<li><a href="#">登陆</a></li>
		</ul>
		<div class="opt">购物车中还没有商品，赶紧选购吧！</div>
							<script>
								$("header div#wrapper div.head_right ul li.li_right").hover(function(){
								$(".opt").css("display","block")
								},function(){
									$(".opt").css("display","none")
								});
							</script>
		</div>
		</div>
		 </header>
		 <main>
		<!-- 面包屑导航 结构化元素 nav导航-->
		<nav id="m1">
			<script>
				$(document).ready(function(){
				var se=$("#m1").offset().top;
				//滚动值：BOM对象+事件源
				//$(window)  抓取页面window对象，监听窗口时间：窗口改变，滚动
				$(window).scroll(function(){
					// alert("测试是否滚动")
					var st=$(window).scrollTop();
					//判断固定值大于滚动值，滚动超过200，实现切换 吸顶效果
					if(st>se){
						//条件成立：大于200px 切换吸顶效果
						$("#m1").addClass("sticky");
					}else{
						//条件不成立  小于200px
					$("#m1").removeClass("sticky");
					}
				});
					
				});
			</script>
		<nav class="m1_left">
		<ul class="gif">
		<li><img src="img/images/LOGO.png" alt="#" class="i1"/></li>
		<li><img src="img/images/donghua.gif" alt="#" class="i2"/></li>
		<li><a href="#">小米盒子</a></li>
		<li><a href="#">红米</a></li>
		<li><a href="#">平板</a></li>
		<li><a href="#">电视</a></li>
		<li><a href="#">盒子</a></li>
		<li><a href="#">路由器</a></li>
		<li><a href="#">智能硬件</a></li>
		<li><a href="#">服务</a></li>
		<li><a href="#">社区</a></li>
		</ul>																	
		</nav>
		<nav class="m1_right">
		<ul id="u1">
		<!-- u1左 -->
		<ul class="u1_left">
		<li><a href="#" class="g">小米手机4c</a></li>
		<li><a href="#" class="h">平衡车</a></li>
		</ul>
		<!-- u1右 -->
		<ul class="u1_right">
		<li><img src="img/images/search.png" alt="#" /></li>
		</ul>
		</ul>  
		</nav>
		</nav>
			<!-- m2 -->
				 <nav id="m2">
					 <!-- 左栏区 -->
					 <aside>
					 			 <ul class="sidebar">
					 	<div class="out"></div>
					 	<ol>
					 	<li>手机 平板 电话卡 <span>></span></li>
					 	<li>电视 盒子 <span>></span></li>
					 	<li>路由器 智能硬件 <span>></span></li>
					 	<li>移动电源  插线板 <span>></span></li>
					 	<li>耳机 音箱 <span>></span></li>
					 	<li>电池 储存卡 <span>></span></li>
					 	<li>保护套 后盖 <span>></span></li>
					 	<li>贴膜 其他配件<span>></span></li>
					 	<li>米兔 服装<span>></span></li>
					 	<li>箱包 其他周边 <span>></span></li>	
					 	</ol>
					 </ul>	
					 </aside>
					<script>
						
								 //左栏弹出与隐藏  .hover事件源+css函数
								 //选择器：li
								 $("aside ul.sidebar ol li").hover(function(){
								/*弹出框默认：隐藏--hover悬停第一件事：显示*/	 
								$("aside ul.sidebar div.out").css("display","block");
								 },function(){
								$("aside ul.sidebar div.out").css("display","none");	 
								 });
								 
					</script>
					  
					<!-- 右侧：轮播图 结构化元素：图片、图标、代码片段-->
				<figure>
				<div class="fly">
				<!-- 2.id="animation"针对轮播添加功能效果 -->
				<div id="animation"></div> 
				<!--class="container"轮播图空间范围  -->
				<div class="container">
				<!-- 4.class=banner针对轮播图效果功能 -->
				<div class="banner" id="lazyload">
				<!-- 5.放图片 -->
				<ul>
				    <li><img src="img/images/banner01.jpg" alt="1" width="890px" height="410px"/></li>
					<li><img src="img/images/banner02.jpg" alt="2" width="890px" height="410px"/></li>
					<li><img src="img/images/banner03.jpg" alt="3" width="890px" height="410px"/></li>
					<li><img src="img/images/banner04.jpg" alt="4" width="890px" height="410px"/></li>
					<li><img src="img/images/banner05.jpg" alt="5" width="890px" height="410px"/></li>
			    </ul>
				</div>
				</div>
				</div>
				<script src="js/jquery-1.11.1.js"></script>
				<script src="js/highlight.pack.js"></script>
				<script src="js/jquery.terseBanner.min.js"></script>
				<script src="js/script.js"></script> 
				</figure>	
				 </nav>
				 <!-- m3 -->
			 <nav id="m3">
				 <ul>
				 	<li><img src="img/images/left.png" alt="p1" /></li>
				 	<li><img src="img/images/subnav_icon01.png" alt="p2" /></li>
				 	<li><img src="img/images/subnav_icon02.jpg" alt="p3" /></li>
				 	<li><img src="img/images/subnav_icon03.png" alt="p4" /></li>
				 </ul>
			 </nav>
			 <!-- m4 明星单品白条-->
			  <nav id="m4">
				   <nav class="m4_left">
					   <ul>
						   <li><a href="#">小米明星单品</a></li>
					   </ul>
				   </nav>
				   <nav class="m4_right">
					  <ul>
					   	<li class="square_left"><a href="#">&lt;</a></li>
					   	<li class="square_right"><a href="#">&gt;</a></li>
					  </ul>
				   </nav>                           
			  </nav>
			  <!-- m5明星单品图片 -->
			 <div id="m5">
				 <div class="container">
					<div class="container_star1">
						<dl>
							<dt><img src="img/images/chazuo.png" alt="插座"></dt>
							<dd>小米智能插座 基础版</dd>
							<dd class="product_content1">手机远程遥控，让普通电器变智能</dd>
							<dd class="product_price1">49元</dd>
						</dl>
					</div> 
					<div class="container_star2">
						<dl>
							<dt><img src="img/images/jinghuaqi.png" alt="净化器"></dt>
							<dd>小米空气净化器2</dd>
							<dd class="product_content2">净化能力高达310m3/h</dd>
							<dd class="product_price2">699元</dd>
						</dl>
					</div>
					 <div class="container_star3">
					 	<dl>
					 		<dt><img src="img/images/chaban.png" alt="插线板"></dt>
					 		<dd>小米智能插线板</dd>
					 		<dd class="product_content3">手机远程控制家中电器，智能节电</dd>
					 		<dd class="product_price3">69元</dd>
					 	</dl>
					 </div> 
					 <div class="container_star4">
					 	<dl>
					 		<dt><img src="img/images/erji.png" alt="圈铁耳机"></dt>
					 		<dd>小米圈铁耳机</dd>
					 		<dd class="product_content4">动圈+动铁，双发声单元</dd>
					 		<dd class="product_price4">69元</dd>
					 	</dl>
					 </div> 
					 <div class="container_star5">
					 	<dl>
					 		<dt><img src="img/images/luyouqi.png" alt="路由器2棍"></dt>
					 		<dd>小米路由器 青春版</dd>
					 		<dd class="product_content5">动圈+动铁，双发声单元</dd>
					 		<dd class="product_price5">79元</dd>
					 	</dl>
					 </div>  
				 </div>
			 </div>
			 <!-- m6 智能硬件白条--> 
				 <div id="m6">
					 <div class="m6_left">
						<ul>
							<li><a href="#">智能硬件</a></li>
						</ul> 
					 </div>
					 <div class="m6_right">
						 <ul>
						 	<li><a href="#">查看全部</a><li>
						 	<li><img src="img/images/hardware_morebtn.png" alt="#" /></li>
						 </ul>
					 </div>
				 </div>
				 <!-- m7智能硬件图片 -->
		<div id="m7">
			<div id="menu_left">
				<dl>
					<dt><img src="img/images/haraware_kid.png" alt="#" /></dt>
					<dd>米兔儿童电话手表</dd>
					<dd class="menu_product1">安全防走失，宝贝的贴身护卫</dd>
					<dd class="menu_price1">299元</dd>
					
				</dl>
			</div>
			<div id="menu_right">
				<div class="menu_goods1">
					<dl>
						<dt><img src="img/images/haraware_tizhongcheng.png" alt="体重秤"></dt>
						<dd>小米体重秤</dd>
						<dd class="menu_product2">高精度压力传感器，手机管理全家健康</dd>
						<dd class="menu_price2">99元</dd>
					</dl>
				</div>
				<div class="menu_goods2">
					<dl>
						<dt><img src="img/images/haraware_luyouqi.png" alt="路由器4棍"></dt>
						<dd>小米路由器3</dd>
						<dd class="menu_product3">更安全更稳定，安全发售</dd>
						<dd class="menu_price3">149元</dd>
					</dl>
				</div>
				<div class="menu_goods3">
				<dl>
					<dt><img src="img/images/haraware_shouhuan.png" alt="手环"></dt>
					<dd>小米手环 光感版</dd>
					<dd class="menu_product4">实时监测心率，科学运动</dd>
					<dd class="menu_price4">99元</dd>
				</dl>	
				</div>
				<div class="menu_goods4">
				<dl>
					<dt><img src="img/images/haraware_anfang.png" alt="体重秤"></dt>
					<dd>小米智能安防套装</dd>
					<dd class="menu_product5">智能警戒，为您的家增添一份安心</dd>
					<dd class="menu_price5">699元</dd>
				</dl>	
				</div>
				<div class="menu_goods5">
				<dl>
					<dt><img src="img/images/haraware_xiaoyi.png" alt="相机"></dt>
					<dd>小米运动相机</dd>
					<dd class="menu_product6">边玩边录边拍，手机随时分享</dd>
					<dd class="menu_price6">399元</dd>
				</dl>	
				</div>
				<div class="menu_goods6">
				<dl>
					<dt><img src="img/images/haraware_xieya.png" alt="血压计"></dt>
					<dd>iHealth智能血压计</dd>
					<dd class="menu_product7">送给父母的健康礼物</dd>
					<dd class="menu_price7">199元</dd>
				</dl>	
				</div>
				<div class="menu_goods7">
				<dl>
					<dt><img src="img/images/dianfanbao_icon05.jpg" alt="摄像机"></dt>
					<dd>小米智能摄像机 夜视版</dd>
					<dd class="menu_product8">能看能听能说，手机远程观看</dd>
					<dd class="menu_price8">149元</dd>
				</dl>	
				</div>
				<div class="menu_goods8">
				<dl>
					<dt><img src="img/images/haraware_light.png" alt="床头灯"></dt>
					<dd>Yeelight床头灯</dd>
					<dd class="menu_product9">触摸式操作，给卧室1600万种颜色</dd>
					<dd class="menu_price9">699元</dd>
				</dl>	
				</div>		
			</div>
		</div>
			<!-- m8搭配白条 -->
         <div id="m8">
			 <div class="m8_left">
				<ul>
					<li><a href="#">搭配</a></li>
				</ul>  
			 </div>
			 
			 <div class="m8_right">
				 <ul>
					 <li><a href="#">热门</a></li>
					 <li><a href="#">耳机音箱</a></li>
					 <li><a href="#">电源</a></li>
					 <li><a href="#">电池储存卡</a></li>
				 </ul>
			 </div> 
		 </div>
				<!-- m9搭配图片 --> 
				 <div id="m9">
					 <div class="m9_left">
						<dl>
							<dt><img src="img/images/dapei_icon01.png" alt="#" /></dt>
							<dt><img src="img/images/dapei_icon02.png" alt="#" /></dt>
							
						</dl>
					 </div>
					 <div class="submenu_right">
						 <div class="submenu_goods1">
						 	<dl>
						 		<dt><img src="img/images/dapei_icon03.png" alt="路由器灰块"></dt>
						 		<dd>小米路由器</dd>
						 		<dd class="submenu_product1">更安全更稳定，安全发售</dd>
						 		<dd class="submenu_price1">149元</dd>
						 	</dl>
						 </div>
						 <div class="submenu_goods2">
						 	<dl>
						 		<dt><img src="img/images/dapei_icon04.png" alt="手环 金块"></dt>
						 		<dd>小米手环 光感版</dd>
						 		<dd class="submenu_product2">实时监测心率，科学运动</dd>
						 		<dd class="submenu_price2">99元</dd>
						 	</dl>
						 </div>
						 <div class="submenu_goods3">
						 	<dl>
						 		<dt><img src="img/images/dapei_icon05.png" alt="安防长条"></dt>
						 		<dd>小米智能安防套装</dd>
						 		<dd class="submenu_product3">智能警戒，为您的家增添一份安心</dd>
						 		<dd class="submenu_price3">699元</dd>
						 	</dl>
						 </div>
						 <div class="submenu_goods4">
						 	<dl>
						 		<dt><img src="img/images/dapei_icon06.png" alt="相机灰块长"></dt>
						 		<dd>小米运动相机</dd>
						 		<dd class="submenu_product4">边玩边录边拍，手机随时分享</dd>
						 		<dd class="submenu_price4">399元</dd>
						 	</dl>
						 </div>
						 <div class="submenu_goods5">
						 	<dl>
						 		<dt><img src="img/images/dapei_icon07.png" alt="门锁黑"></dt>
						 		<dd>小米智能摄像机 夜视版</dd>
						 		<dd class="submenu_product5">能看能听能说，手机远程观看</dd>
						 		<dd class="submenu_price5">149元</dd>
						 	</dl>
						 </div>
						 <div class="submenu_goods6">
						 	<dl>
						 		<dt><img src="img/images/dapei_icon08.png" alt="充电宝黑块长"></dt>
						 		<dd>小米智能摄像机 夜视版</dd>
						 		<dd class="submenu_product6">能看能听能说，手机远程观看</dd>
						 		<dd class="submenu_price6">149元</dd>
						 	</dl>
						 </div>
						 
						 <div class="submenu_goods7">
						 	<dl>
						 		<dt><img src="img/images/dapei_icon09.png" alt="语音桶"></dt>
						 		<dd>小米智能摄像机 夜视版</dd>
						 		<dd class="submenu_product7">能看能听能说，手机远程观看</dd>
						 		<dd class="submenu_price7">149元</dd>
						 	</dl>
						 </div>
						 <div class="submenu_goods8">
							 <div class="submenu_goods8_up">
							 	<dl>
							 		<dt><img src="img/images/content-top_icon01.png" alt="黑色耳机"></dt>
							 	</dl>
							 </div>
							 <div class="submenu_goods8_down">
							 	<dl>
							 		<dt><img src="img/images/content-top_icon02.png" alt="橘色更多"></dt>
							 	</dl>
							 </div>
						 </div>
					 </div> 
				 </div>
				 <!-- m10周边白条 -->
				 <div id="m10">
					 <div class="m10_left">
						<ul>
							<li><a href="#">周边</a></li>
						</ul>  
					 </div>
					 <div class="m10_right">
						 <ul>
						 	<li><a href="#">热门</a></li>
						 	<li><a href="#">服装</a></li>
						 	<li><a href="#">米兔</a></li>
						 	<li><a href="#">生活周边</a></li>
							<li><a href="#">箱包</a></li>
						 </ul>
					 </div>
				 </div>
				 <!-- m11周边图片 -->
				 <div id="m11">
				  <div class="m11_left">
				 	<dl>
				 		<dt><img src="img/images/peijian_icon01.png" alt="#" /></dt>
				 		<dt><img src="img/images/peijian_icon02.png" alt="#" /></dt>	
				 	</dl>
				 	 </div>
				 	<div class="list_right">
				 		<div class="list_goods1">
				 		<dl>
				 		<dt><img src="img/images/dapei_icon03.png" alt="鼠标垫"></dt>
				 		<dd>小米金属鼠标垫 小号</dd>
						<dd class="list_price1">49元</dd>
				 		<dd class="list_review1">6483人评价</dd>
				 		</dl>
				 		</div>
				 		<div class="list_goods2">
				 		<dl>
				 		<dt><img src="img/images/peijian_icon04.png" alt="记事本"></dt>
				 		<dd>小米皮质记事本</dd>
				 		<dd class="list_price2">19元</dd>
				 		<dd class="list_review2">3050人评价</dd>
				 		</dl>
				 		</div>    
						<div class="list_goods3">
						<dl>
						<dt><img src="img/images/peijian_icon05.png" alt="随身灯"></dt>
						<dd>小米LED随身灯 增强版</dd>
						<dd class="list_price3">19.9元</dd>
						<dd class="list_review3">5.6万人评价</dd>
						</dl>
						</div>	
						<div class="list_goods4">
						<dl>
						<dt><img src="img/images/peijian_icon06.png" alt="小蜜蜂支架"></dt>
						<dd>手机支架 小蜜蜂</dd>
						<dd class="list_price4">19元</dd>
						<dd class="list_review4">6.9万人评价</dd>
						</dl>
						</div>	
						<div class="list_goods5">
						<dl>
						<dt><img src="img/images/peijian_icon07.png" alt="防尘塞"></dt>
						<dd>小米防尘塞 MI标</dd>
						<dd class="list_price5">3.9元</dd>
						<dd class="list_review5">5.6万人评价</dd>
						</dl>
						</div>
							<div class="list_goods6">
							<dl>
							<dt><img src="img/images/peijian_icon08.png" alt="绿水杯"></dt>
							<dd>小米智能摄像机 夜视版</dd>
							<dd class="list_price6">149元</dd>
							<dd class="list_review6">8461人评价</dd>
							</dl>
							</div>
							<div class="list_goods7">
							<dl>
							<dt><img src="img/images/peijian_icon09.png" alt="收纳盒"></dt>
							<dd>小米电源线收纳盒</dd>
							<dd class="list_price7">39元</dd>
							<dd class="list_review7">8461人评价</dd>
							</dl>
							</div>
						<div class="list_goods8">
						<div class="list_goods8_up">
						<dl>
						<dt><img src="img/images/peijian_icon10.png" alt="鼠标垫黑色"></dt>
						</dl>
						</div>
						<div class="list_goods8_down">
						<dl>
						<dt><img src="img/images/content-top_icon02.png" alt="橘色更多"></dt>
						</dl>
						 </div>
						</div>	
				 			</div>
							</div> 
				 <!-- m12配件 白条-->
		<div id="m12">
		 <div class="m12_left">
		<ul>
			<li><a href="#">配件</a></li>
			</ul>  
		</div>
			<div class="m12_right">
			<ul>
			<li><a href="#">热门</a></li>
			<li><a href="#">保护套</a></li>
			<li><a href="#">后盖</a></li>
			<li><a href="#">贴膜</a></li>
			<li><a href="#">其他配件</a></li>
			</ul>
			</div>
		</div>		
		 <!-- m13配件图片 -->
		<div id="m13">
		 <div class="m13_left">
			<dl>
				<dt><img src="img/images/zhoubian_icon01.png" alt="#" /></dt>
				<dt><img src="img/images/zhoubian_icon02.png" alt="#" /></dt>	
			</dl>
			 </div>
			<div class="part_right">
				<div class="part_goods1">
				<dl>
				<dt><img src="img/images/zhoubian_icon03.png" alt="自拍杆"></dt>
				<dd>小米自拍杆</dd>
				<dd class="part_price1">49元</dd>
				<dd class="part_review1">6.4万人评价</dd>
				</dl>
				</div>
				<div class="part_goods2">
				<dl>
				<dt><img src="img/images/zhoubian_icon04.png" alt="小米5钢化膜"></dt>
				<dd>小米手机5 钢化膜(0.22mm)</dd>
				<dd class="part_price2">29元</dd>
				<dd class="part_review2">1万人评价</dd>
				</dl>
				</div>
				<div class="part_goods3">
				<dl>
				<dt><img src="img/images/zhoubian_icon05.png" alt="红米钢化膜"></dt>
				<dd>红米手机Note3 钢化膜(0.22mm)</dd>
				<dd class="part_price3">699元</dd>
				<dd class="part_review3">5.6万人评价</dd>
				</dl>
				</div>
				<div class="part_goods4">
				<dl>
				<dt><img src="img/images/zhoubian_icon06.png" alt="标准贴膜"></dt>
				<dd>小米Note标准贴膜(2片装)</dd>
				<dd class="part_price4">19元</dd>
				<dd class="part_review4">2.1万人评价</dd>
				</dl>
				</div>
				<div class="part_goods5">
				<dl>
				<dt><img src="img/images/zhoubian_icon07.png" alt="随身wifi"></dt>
				<dd>小米随身WIFI</dd>
				<dd class="part_price5">19.9元</dd>
				<dd class="part_review5">30.1万人评价</dd>
				</dl>
				</div>
				<div class="part_goods6">
				<dl>
				<dt><img src="img/images/zhoubian_icon08.png" alt="黑手机壳"></dt>
				<dd>小米百变随身杯</dd>
				<dd class="part_price6">39元</dd>
				<dd class="part_review6">1.2万人评价</dd>
				</dl>
				</div>
				<div class="part_goods7">
				<dl>
				<dt><img src="img/images/zhoubian_icon09.png" alt="硅胶壳"></dt>
				<dd>小米手机5 硅胶保护套</dd>
				<dd class="part_price7">69元</dd>
				<dd class="part_review7">215人评价</dd>
				</dl>
				</div>
				<div class="part_goods8">
				<div class="part_goods8_up">
				<dl>
				<dt><img src="img/images/zhoubian_icon10.png" alt="粉色支架"></dt>
				</dl>
				</div>
				<div class="part_goods8_down">
				<dl>
				<dt><img src="img/images/content-top_icon02.png" alt="橘色更多"></dt>
				</dl>
				 </div>
				</div>		
			</div>	
			</div> 		 
			<!-- m14热评产品白条 -->	 
				 <div id="m14">
				  <div class="m14_left">
				 <ul>
				 	<li><a href="#">热评产品</a></li>
				 	</ul>  
				 </div>
				 </div>
				 <!-- m15热评产品图片 -->
				 <div id="m15">
				<div class="hot1">
				<dl>
				<dt><img src="img/images/hotproduct_icon01.png" alt="U盘"></dt>
				<dd class="hot1_description1">超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</dd>
				<dd class="from1">来自于 香草忘忧 的评价</dd>
				<div class="hot1_down">
				<dd class="product1">米兔手机u盘</dd>	
				<dd class="hot1_price1">49.9元</dd>
				</div>	
				</dl>
				</div> 	 
				<div class="hot2">
				<dl>
				<dt><img src="img/images/hotproduct_icon02.png" alt="黑色耳机"></dt>
				<dd class="hot2_description2">绝对5星，音质挺好，包装也不错，物流也快</dd>
				<dd class="from2">来自于 星星活火 的评价</dd>
				<div class="hot2_down">
				<dd class="product2">小米活塞耳机 标准版</dd>	
				<dd class="hot2_price2">49.9元</dd>
				</div>	
				</dl>
				</div> 	 	 
				<div class="hot3">
				<dl>
				<dt><img src="img/images/hotproduct_icon03.png" alt="插排"></dt>
				<dd class="hot3_description3">做工没的说，摸起来非常细腻，并且比传统的插板稳固</dd>
				<dd class="from3">来自于 林新城 的评价</dd>
				<div class="hot3_down">
				<dd class="product3">小米插线板</dd>	
				<dd class="hot3_price3">49元</dd>
				</div>	
				</dl>
				</div> 	 	 	
				 <div class="hot4">
				 <dl>
				 <dt><img src="img/images/hotproduct_icon04.png" alt="头戴耳机"></dt>
				 <dd class="hot4_description4">一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</dd>
				 <dd class="from4">来自于 人生如戏 的评价</dd>
				 <div class="hot4_down">
				 <dd class="product4">小米头戴式耳机 标准版</dd>	
				 <dd class="hot4_price4">499元</dd>
				 </div>	
				 </dl>
				 </div> 	 	  
				 </div>
				<!-- m16内容白条 --> 
				<div id="m16">
				 <div class="m16_left">
				<ul>
					<li><a href="#">内容</a></li>
					</ul>  
				</div>
				</div> 
			<!-- m17内容图片 -->	 
			<div id="m17">
			<div class="summary1">
			<dl>
			<dd class="summary1_sort">图书</dd>
			<dd class="summary1_name">阿弥陀佛，么么哒</dd>
			<dd class="summary1_description">大冰新书，12个不舍得读完的，暖心的，真实的江湖故事</dd>	
			<dd class="summary1_price">9.99元</dd>
			<dt><img src="img/images/classify_icon01.png" alt="书"></dt>	
			</dl>
			</div> 	 	
			<div class="summary2">
			<dl>
			<dd class="summary2_sort">主题</dd>
			<dd class="summary2_name">主题市场</dd>
			<dd class="summary2_description">众多个性主题、百变锁屏与自由桌面让你的手机与众不同</dd>	
			<dd class="summary2_price">MIUI</dd>
			<dt><img src="img/images/classify_icon02.png" alt="兔子"></dt>	
			</dl>
			</div> 	 		
			<div class="summary3">
			<dl>
			<dd class="summary3_sort">游戏</dd>
			<dd class="summary3_name">米柚手游模拟器</dd>
			<dd class="summary3_description">在电脑上玩遍小米所有手游</dd>	
			<dd class="summary3_price">免费</dd>
			<dt><img src="img/images/classify_icon03.png" alt="logo"></dt>	
			</dl>
			</div> 	 			
			<div class="summary4">
			<dl>
			<dd class="summary4_sort">应用</dd>
			<dd class="summary4_name">2015年度应用</dd>
			<dd class="summary4_description">精彩世界，尽情下载</dd>	
			<dd class="summary4_price">免费</dd>
			<dt><img src="img/images/classify_icon04.png" alt="应用"></dt>	
			</dl>
			</div> 	 				
			</div>
			<!-- m18视频白条 -->
			<div id="m18">
			<div class="m18_left">
			<ul>
			<li><a href="#">视频</a></li>
			</ul> 
			</div>
			<div class="m18_right">
			<ul>
			<li><a href="#">查看更多</a><li>
			<li><img src="img/images/hardware_morebtn.png" alt="#" /></li>
			</ul>
			</div>
			</div>
			<!-- m19视频图片 -->	 
			<div id="m19">
			<div class="video1">
			<dl>
			<dt><img src="img/images/video_icon01.jpg" alt="马丽"></dt>
			<dd class="video1_description">笑喷了，沈腾爆笑出演，6集联播</dd>
			<dd class="video1_title">小米Max沈腾爆笑预告全集</dd>		
			</dl>
			</div> 	
			<div class="video2">
			<dl>
			<dt><img src="img/images/video_icon02.jpg" alt="雷军"></dt>
			<dd class="video2_description">小米2016春季新品发布会</dd>
			<dd class="video2_title">小米5 十余项黑科技亮相</dd>		
			</dl>
			</div> 		
			<div class="video3">
			<dl>
			<dt><img src="img/images/video_icon03.jpg" alt="手机屏"></dt>
			<dd class="video3_description">15秒了解小米5 有多快</dd>
			<dd class="video3_title">华少用超快语速告诉你小米5 到底有多块 </dd>		
			</dl>
			</div> 			
			<div class="video4">
			<dl>
			<dt><img src="img/images/video_icon04.jpg" alt="纪录片"></dt>
			<dd class="video4_description">《去探索》小米年度品牌视频</dd>
			<dd class="video4_title">与小米一起探索黑科技</dd>		
			</dl>
			</div> 			
			</div>
		 </main>
		 <footer>
		<div id="f1">
			<div class="f1_up">
				<ul class="f1_up1">
				<li><img src="img/images/footer_icon01.png" alt="#" /></li>
				<li><a href="#">1小时快修服务</a></li>
				</ul>
				<ul class="f1_up2">
				<li><img src="img/images/footer_icon02.png" alt="#" /></li>
				<li><a href="#">7天无理由退货</a></li>	
				</ul>
				<ul class="f1_up3">
				<li><img src="img/images/footer_icon03.png" alt="#" /></li>
				<li><a href="#">15天免费换修</a></li>	
				</ul>
				<ul class="f1_up4">
				<li><img src="img/images/footer_icon04.png" alt="#" /></li>
				<li><a href="#">满150元包邮</a></li>
				</ul>
				<ul class="f1_up5">
				<li><img src="img/images/footer_icon05.png" alt="#" /></li>
				<li><a href="#">520余家售后网点</a></li>
				</ul>
			</div>
			<div class="f1_down">
				<!-- 帮助中心栏目 -->
				<div class="column">
					<h3>帮助中心</h3>
				<ul>
					<li><a href="#">购物指南</a></li>
					<li><a href="#">支付方式</a></li>
					<li><a href="#">配送方式</a></li>
				</ul>
				</div>
				<!-- 服务支持栏目 -->
				<div class="column">
					<h3>服务支持</h3>
					<ul>
						<li><a href="#">售后政策</a></li>
						<li><a href="#">自助服务</a></li>
						<li><a href="#">相关下载</a></li>
					</ul>
				</div>
				<!-- 线下门店栏目 -->
				<div class="column">
					<h3>线下门店</h3>
					<ul>
						<li><a href="#">小米之家</a></li>
						<li><a href="#">自助服务</a></li>
						<li><a href="#">相关下载</a></li>
					</ul>
				</div>
				<!-- 关于小米栏目 -->
				<div class="column">
					<h3>关于小米</h3>
					<ul>
						<li><a href="#">了解小米</a></li>
						<li><a href="#">加入小米</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
				<!-- 关注我们栏目 -->
				<div class="column">
					<h3>关注我们</h3>
					<ul>
						<li><a href="#">新浪微博</a></li>
						<li><a href="#">小米微信</a></li>
						<li><a href="#">官方微信</a></li>
					</ul>
				</div>
				<!-- 特色服务栏目 -->
				<div class="column">
					<h3>特色服务</h3>
					<ul>
						<li><a href="#">F码通道</a></li>
						<li><a href="#">小米移动</a></li>
						<li><a href="#">防伪查询</a></li>
					</ul>
				</div>
				<!-- 右侧：客服信息栏目 -->
				<div class="column contact_column">
					<h3>400-100-5678</h3>
					<p>周一至周日 8：00-18：00</p>
					<p>（仅收市话费）</p>
					<a href="#">24小时在线客服</a>
				</div>
			</div>
		</div>	 
		<div id="f2">
			<div class="f2_left">
			<ul class="logo">
				<li><img src="img/images/LOGO.png" alt="#" /></li>
			</ul>	
			</div>
			<div class="f2_mid">
				<ul class="line1">
					<li><a href="#">小米网</a></li>
					<li><a href="#">MIUI</a></li>
					<li><a href="#">米聊</a></li>
					<li><a href="#">多看书城</a></li>
					<li><a href="#">小米路由器</a></li>
					<li><a href="#">视频电话</a></li>
					<li><a href="#">小米后院</a></li>
					<li><a href="#">小米天猫店</a></li>
					<li><a href="#">小米淘宝直营店</a></li>
					<li><a href="#">小米网盟</a></li>
					<li><a href="#">问题反馈</a></li>
					<li><a href="#">Select Region</a></li>
				</ul>
				<ul class="line2">
					<li><a href="#">©mi.com京ICP证110507号京ICP条10046444号京公网安备11010802020134号京网文[2014]0059-0009号违法和不良信息举报 电话:185-0130-1238</a></li>
				</ul>
				<ul class="line3">
					<li><a href="#">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a></li>
				</ul>
			</div>
			<div class="f2_right">
				<ul class="logo1">
					<li><img src="img/images/safe_icon01.png" alt="信红标" /></li>
					<li><a href="#">诚信网站师范企业</a></li>
				</ul>
				<ul class="logo2">
					<li><img src="img/images/safe_icon02.png" alt="信用" /></li>
					<li><a href="#">可信网站信用评价</a></li>
				</ul>
				<ul class="logo3">
					<li><img src="img/images/safe_icon03.png" alt="保障" /></li>
					<li><a href="#">网上交易保障中心</a></li>
				</ul>
			</div>	
		</div>	 	 
		 </footer>
	</body>
</html>